<template>
  <cloudPage>
    <cloudHeader slot="gHeader" background="#121212">
      <view class="grace-header-body">
        <!-- 返回按钮 -->
        <view
          class="grace-header-icons grace-icons icon-arrow-left"
          style="color: #fff"
          @tap.stop="handleNavBack"
        ></view>
        <!-- 中间内容 -->
        <view
          class="grace-header-content-noflex grace-text-center font-32"
          style="color: #fff; font-size: 36rpx"
          >{{ $t("mf.my.setting") }}</view
        >
        <!-- 右侧按钮 -->
        <view class="icons" style="font-size: 38rpx"></view>
      </view>
    </cloudHeader>
    <view class="container">
      <image src="/static/mf/my/setting_logo.png" class="setting_logo" />
      <view class="box">
        <view class="list flex" @tap.stop="showNickname = true">
          <view class="flex1">{{ $t("mf.my.nickname") }}</view>
          <view class="flex" style="align-items: center">
            <view class="data">{{
              userInfo && userInfo.nickname ? userInfo.nickname : "点击编辑昵称"
            }}</view>
            <image src="/static/mf/my/left_arrow.png" class="left_arrow" />
          </view>
        </view>
        <view class="list flex" v-if="userInfo && userInfo.mobile">
          <view class="flex1">{{ $t("mf.my.mobile") }}</view>
          <view class="flex">
            <view class="data">{{ userInfo && userInfo.mobile }}</view>
          </view>
        </view>
        <view class="list flex" v-if="userInfo && userInfo.email">
          <view class="flex1">{{ $t("mf.my.email") }}</view>
          <view class="flex">
            <view class="data">{{ userInfo && userInfo.email }}</view>
            <view
              class="grace-header-icons grace-icons icon-arrow-right"
              style="color: #fff"
            ></view>
          </view>
        </view>
        <view class="list flex">
          <view class="flex1">UID</view>
          <view class="data">{{ userInfo && userInfo.show_user_id }}</view>
        </view>
      </view>
      <!-- "lang": "语言",
    "condition": "条件",
    "Update": "检测更新" -->
      <view class="box">
        <view class="list flex">
          <view class="flex1">{{ $t("new.lang") }}</view>
          <view class="flex" style="align-items: center">
            <view class="data">
              {{ locale == "zh_TW" ? "中文" : "English" }}</view
            >
            <image src="/static/mf/my/left_arrow.png" class="left_arrow" />
          </view>
        </view>
        <view class="list flex">
          <view class="flex1">{{ $t("new.condition") }}</view>
          <image src="/static/mf/my/left_arrow.png" class="left_arrow" />
        </view>
        <view class="list flex">
          <view class="flex1" @click="checkNew">{{ $t("new.Update") }}</view>
          <image src="/static/mf/my/left_arrow.png" class="left_arrow" />
        </view>
      </view>
    </view>
    <button class="out_btn" @tap.stop="logoutAndRedirectToLogin">
      {{ $t("mf.my.login_out") }}
    </button>
    <graceBottomDialog
      :show="showNickname"
      @closeDialog="closeShade1"
      background="rgba(0,0,0,0.3)"
    >
      <view slot="content">
        <view class="shade_nickname_box" style="z-index: 100">
          <image
            src="/static/mf/my/close.png"
            class="close"
            @tap.stop="closeShade1"
          />
          <view class="shade_title"
            >{{ $t("mf.my.update") }}{{ $t("mf.my.nickname") }}</view
          >
          <input
            type="text"
            :placeholder="$t('mf.my.please_nickname')"
            placeholder-style="color: rgba(255, 255, 255, 0.8);"
            class="shade_input"
            v-model="nickname"
          />
          <button
            class="shade_btn"
            @tap.stop="nickConfirm"
            :loading="loading['my.user_edit']"
          >
            {{ $t("mf.suanlibao.confirm") }}
          </button>
        </view>
      </view>
    </graceBottomDialog>
  </cloudPage>
</template>

<script>
import { mapActions, mapGetters, mapState } from "vuex";
export default {
  data() {
    return {
      showNickname: false,
      nickname: null,
    };
  },
  methods: {
    ...mapActions("user", ["logout"]),
    ...mapActions("mf/my", ["editUser", "loadUserInfo"]),
    ...mapActions("system", ["checkVersion"]),
    logoutAndRedirectToLogin() {
      this.logout();
      this.handleNavTo({
        url: "/pages/mf/home/index",
        type: "switchTab",
      });
    },
    closeShade1() {
      this.showNickname = false;
    },
    async nickConfirm() {
      await this.editUser({
        nickname: this.nickname,
      });
      this.loadUserInfo();
      this.closeShade1();
      this.makeToast({ title: this.$t("mf.my.success") });
    },
    checkNew() {
      this.checkVersion();
    },
  },
  computed: {
    ...mapState("mf/my", ["userInfo"]),
    ...mapGetters("system", ["locale"]),
  },
  onLoad() {
    console.log(this.userInfo);
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  padding: 60rpx 20rpx 0;
  box-sizing: border-box;
  text-align: center;
}
.setting_logo {
  width: 110rpx;
  height: 99rpx;
  margin-bottom: 69rpx;
}
.box {
  width: 100%;
  height: 352rpx;
  background: linear-gradient(270deg, #1b1b2b 0%, #232534 100%);
  box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.5);
  border-radius: 12rpx;
  padding: 20rpx 40rpx 0;
  box-sizing: border-box;
  margin-bottom: 30rpx;
}
.list {
  width: 100%;
  height: 102rpx;
  border-bottom: 1px solid #151935;
  box-sizing: border-box;
  line-height: 102rpx;
  font-size: 30rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  text-align: left;
  align-items: center;
}
.list:last-child {
  border-bottom: none;
}
.out_btn {
  width: 516rpx;
  height: 100rpx;
  background-image: url("/static/auth/login/btn_bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  line-height: 100rpx;
  position: absolute;
  border-radius: 55rpx;
  bottom: 80rpx;
  left: 50%;
  transform: translateX(-50%);
  font-size: 34rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #2b2c3e;
}
.shade_nickname_box {
  z-index: 10000;
  width: 100%;
  height: 511rpx;
  background-image: url("/static/mf/suanlibao/profit_tan.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: #111;
  position: relative;
  /* left: 50%;
  transform: translateX(-50%); */
  padding: 60rpx 50rpx;
  box-sizing: border-box;
}

.shade_nickname_box .close {
  position: absolute;
  width: 38rpx;
  height: 38rpx;
  top: 60rpx;
  right: 40rpx;
}
.shade_title {
  height: 48rpx;
  font-size: 34rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  line-height: 48rpx;
  margin-bottom: 60rpx;
}
.shade_input {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  box-sizing: border-box;
  font-size: 28rpx;
  padding: 0 0 30rpx;
  border-bottom: 1px solid rgba(254, 224, 150, 0.2);
  color: #fff;
  margin-bottom: 60rpx;
}
.shade_btn {
  width: 516rpx;
  height: 88rpx;
  background-image: url("/static/auth/login/btn_bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 55rpx;
  line-height: 88rpx;
  font-size: 30rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 600;
  color: #2b2c3e;
}
.left_arrow {
  width: 40rpx;
  height: 22px;
  margin-left: 10rpx;
}
</style>